<template>
    <!--图片logo -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
    <div class="container">
        <a class="navbar-brand logo" href="#">
            <img src="../assets/img/疆云logo.png" width="40" height="40" class="d-inline-block align-top" alt="">
            疆云
    </a>
      <div class="collapse navbar-collapse font" id="navbarSupportedContent">
            <ul v-if="$store.state.user.role == '3'" class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item home active">
                <router-link :class="route_name='adminreq'?' nav-link action':'nav-link '" :to="{name:'adminreq'}" role="button">借书记录</router-link>
            </li>
            <li class="nav-item home2">
                <router-link :class="route_name='adminbook'?' nav-link action':'nav-link '" :to="{name:'adminbook'}">书籍管理</router-link>
            </li>
            <li class="nav-item home2">
                <router-link :class="route_name='take'?' nav-link action':'nav-link '" :to="{name:'take'}">审核</router-link>
            </li>
            <li class="nav-item home2">
                <router-link :class="route_name='takeover'?' nav-link action':'nav-link '" :to="{name:'takeover'}">留言管理</router-link>
            </li>
            <li class="nav-item home2">
                <router-link :class="route_name='admin'?' nav-link action':'nav-link '" :to="{name:'admin'}">管理员管理</router-link>
            </li>
        </ul>


        <ul v-else-if="$store.state.user.role == '2'" class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item home active">
                <router-link :class="route_name='adminreq'?' nav-link action':'nav-link '" :to="{name:'adminreq'}" role="button">借书记录</router-link>
            </li>
            <li class="nav-item home2">
                <router-link :class="route_name='adminbook'?' nav-link action':'nav-link '" :to="{name:'adminbook'}">书籍管理</router-link>
            </li>
            <li class="nav-item home2">
                <router-link :class="route_name='take'?' nav-link action':'nav-link '" :to="{name:'take'}">审核</router-link>
            </li>
            <li class="nav-item home2">
                <router-link :class="route_name='takeover'?' nav-link action':'nav-link '" :to="{name:'takeover'}">留言管理</router-link>
            </li>
            <li class="nav-item home2">
                <router-link :class="route_name='user'?' nav-link action':'nav-link '" :to="{name:'user'}">用户管理</router-link>
            </li>
        </ul>

            <ul v-else class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item home active">
                    <router-link :class="route_name='home'?' nav-link action':'nav-link '" :to="{name:'home'}" role="button">首页</router-link>
                </li>
                <li class="nav-item home2">
                <router-link :class="route_name='borror'?' nav-link action':'nav-link '" :to="{name:'borror'}">借书</router-link>
                </li>
                <li class="nav-item home2">
                    <router-link :class="route_name='req'?' nav-link action':'nav-link '" :to="{name:'req'}">借书记录</router-link>
                </li>
                <li class="nav-item home2">
                    <router-link :class="route_name='home'?' nav-link action':'nav-link '" :to="{name:'home'}">关于我们</router-link>
                </li>
      
            </ul>
        

        <ul class="navbar-nav" v-if="$store.state.user.is_login">
            <img :src="$store.state.user.photo" alt="">
            <li class="nav-item">    
            <a class="nav-link " href="#">
                {{ $store.state.user.username }}
            </a>
            </li>
            <li class="nav-item">
                <a  @click="logout" class="nav-link  font " href="#">
                退出
                </a>
            </li>
        </ul>
        <ul class="navbar-nav" v-else>
            <li class="nav-item ">
            <router-link :class="route_name='login'?' nav-link action':'nav-link '" :to="{name : 'login'}" role="button" >
                登录
            </router-link>
            </li>
            <li class="nav-item ">
            <router-link :class="route_name='logon'?' nav-link action':'nav-link '" :to="{name : 'logon'}" role="button" >
                注册
            </router-link>
            </li>
        </ul>
      </div>
    </div>
    </nav>

   

</template>

<script>

import { useRoute } from 'vue-router';
import { computed } from 'vue';
import { useStore } from 'vuex';
import router from '@/router';

export default{
    setup(){
        const store = useStore();
        const route = useRoute();
        let route_name = computed(()=> route.name);
        const logout = () =>{
            store.dispatch("logout");
            router.push({name:"login"});
        }
        return{
            route_name,
             logout,
        }
       }
}

</script>

<style scoped>
img{
    border-radius:50%;
    margin-top: 1vh;
    width: 2vw;
    height: 2vw;
}

.logo{
    /* margin-left: 5vw; */
    font-family:"楷体";
    font-size: 28px;
    font-weight: bold;
    margin-right: 5vw;
}
.font{
    font-size: 18px;
    font-family: "楷体";
}
.home{
    margin-left: 30vw;
}
.home2{
    margin-left: 2vw;
}


</style>